<template>
  <div>
    <div v-if="data !== null">
      <div class="title">{{ data.artist.name }}介绍</div>
      <div class="content">{{ data.artist.briefDesc }}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  mounted() {
    this.id = window.sessionStorage.getItem('artists');
    this.getData();
  },
  // computed: {
  //   ...mapState(["resArtists"]),
  // },
  // watch: {
  //   resArtists: function (newVal, oldVal) {
  //     this.id = newVal.resArtists;
  //     this.getData();
  //   },
  // },
  data() {
    return {
      id: null,
      data: null,
    };
  },
  methods: {
    async getData() {
      this.data = null;
      this.$api.arDetail({ id: parseInt(this.id), cookie: localStorage.getItem('cookie') }).then((ret) => {
        this.data = ret.data;
      });
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 24px;
  margin-bottom: 5px;
}

.content {
  font-size: 20px;
  margin-bottom: 40px;
  line-height: 40px;
}
</style>
